<template>
  <div style="display: flex;align-items: center;justify-content: space-between;">
    <div class="ChinaChart" :id="id"></div>
    <div style="width: 50%;height: 90vh;">
      <div class="WorldCard">
        <h2 class="CardTitle">国内病例</h2>
        <div class="worldDataTable">
          <span class="worldDableSpan itemTitle">累计确诊</span>
          <span class="worldDableSpan itemTitle">累计死亡</span>
          <span class="worldDableSpan itemTitle">累计治愈</span>

          <span class="worldDableSpan itemData">{{ data.confirm}}人</span>
          <span class="worldDableSpan itemData">{{data.dead }}人</span>
          <span class="worldDableSpan itemData">{{ data.heal}}人</span>

          <span class="worldDableSpan itemDataAdd">较昨日{{ data.confirmAdd}}人</span>
          <span class="worldDableSpan itemDataAdd">较昨日{{ data.deadAdd}}人</span>
          <span class="worldDableSpan itemDataAdd">较昨日{{data.healAdd }}人</span>
        </div>
      </div>
      <div class="PieChart" id="PieChart"></div>
    </div>
  </div>
</template>

<script>
import { getDetailsCount, getDetailsList, countProvince } from '@/api/echarts'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/visualMap')
require('echarts/lib/chart/map')
require('echarts/lib/component/geo')
require('echarts/lib/component/legend')
require('echarts/lib/chart/pie')
import china from '../utils/maps/china.json'

export default {
  name: 'ChinaChart',
  data() {
    return {
      data: {},
      id: 'ChinaChart',
      title: '新型冠状病毒疫情数据分析',
      styles: {
        height: '100%',
        width: '100%'
      }
    }
  },
  mounted() {
    countProvince().then(res => {
      console.log('ressss', res)
      if (res.code == 200) {
        this.drawtwo(res.data)
      }
    })
    getDetailsList().then(res => {
      if (res.code == 200) {
        this.draw(res.data)
      }
    })
    getDetailsCount().then(res => {
      if (res.code == 200) {
        this.data = res.data
      }
    })
  },
  methods: {
    draw(data) {
      let dataList = data
      console.log('= this.chartData', data)
      dataList = JSON.parse(JSON.stringify(dataList).replace(/count/g, 'value'))
      dataList = JSON.parse(JSON.stringify(dataList).replace(/province/g, 'name'))
      console.log('dataList', dataList)
      let option = {
        title: {
          text: '各省份现存确诊人数',
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#fff',
            textBorderWidth: '2',
            fontSize: 20
          }
        },
        tooltip: {
          show: true,
          enterable: false,
          trigger: 'item',
          showContent: true,
          formatter: function (params) {
            if (params.value) {
              return '现存确诊' + '<br/>' + params.name + ' : ' + params.value
            } else {
              return '现存确诊' + '<br/>' + params.name + ' : ' + '0'
            }
          }
        },
        visualMap: {
          min: 0,
          max: 150,
          left: 'right',
          top: 'center',
          // text: ["高", "低"], //取值范围的文字
          inRange: {
            // color: ["#d984f3", "#450558"], //取值范围的颜色
            color: ['#FFF', '#fe010b'] //取值范围的颜色
          },
          show: false //图注
          // pieces: [//地图左下角显示可视化
          //   {min: 10000,color:'#D1241A'}, // 不指定 max，表示 max 为无限大（Infinity）。
          //   {min: 1000, max: 9999,color:'#F27152'},
          //   {min: 100, max: 999,color:'#F28E52'},
          //   {min: 10, max: 99,color:'#F2B252'},
          //   {min: 1, max: 9,color:'#A5A5A5'},
          //   {value: 0}, // 表示 value 等于 0 的情况。
          // ]
        },
        geo: {
          map: 'china',
          roam: true, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)'
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#8555a822',
              shadowColor: '#8555a8'
              // shadowBlur: 5,
            },
            emphasis: {
              areaColor: '#d984f3', //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: dataList
          }
        ]
      }
      let myChart = echarts.init(document.getElementById('ChinaChart'))
      echarts.registerMap('china', china)
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    drawtwo(data) {
      let valueData = []
      data.map(item => {
        valueData.push({ name: item.province, value: item.count })
      })
      var chartDom = document.getElementById('PieChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '新增病例前几省份',
          left: 'center',
          textStyle: {
            color: '#000',
            textBorderWidth: '2',
            fontSize: 20
          }
        },
        color: ['#ee22ee', '#ee33ee', '#ee44ee', '#ee55ee', '#ee66ee', '#ee77ee', '#ee88ee', '#ee99ee', '#eeaaee', '#eebbee'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}\n{c}例'
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: valueData
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style>
.ChinaChart {
  width: 50%;
  height: 90vh;
  border: 1px solid #f9f9f9;
  background: #f9f9f9;
  border-right: 1px solid #000;
  /* margin: 20px; */
}
.PieChart {
  width: 100%;
  height: 45vh;
  background: #f9f9f9;
}
.WorldCard {
  height: 45vh;
  width: 100%;
  color: #000;
  background: #f9f9f9;
  padding: 40px;
}
.worldDataTable {
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.worldDableSpan {
  width: calc(100% / 3);
  font-weight: 500;
}

.itemTitle {
  font-size: 0.8em;
}
.itemData {
  font-size: 1.2em;
}
.itemDataAdd {
  font-size: 0.6em;
}
</style>
